import { FC, Key, useState } from 'react';
import { useVisible } from '@/biz-components/modals/hooks';

import ArrayTable from '@/biz-components/array-table/ant-array-table';

import { useField } from '@formily/react';

import { toJS } from '@formily/reactive';

import CheckboxTableDrawer from './drawer';
import ScanTableDrawer from './drawer/scan';
import { DynamicObjectAny } from '@/typings';

import { Space, Button } from 'antd';

interface CutPaymentPoolListProps {
  onChange: (values: any) => void;
  value?: any[];
  drawerPageCode: string;
  pageApi: string;
  extraPrams?: DynamicObjectAny;
  editable?: boolean;
  selection?: boolean;
  primaryText: string;
  drawerRowSelection: any;
  drawerNoPagination?: boolean;
  noQueryKeys?:boolean;
  [key: string]: any;
}

const ArrayTableDrawer: FC<CutPaymentPoolListProps> = ({
  drawerPageCode,
  pageApi,
  extraPrams,
  editable,
  selection,
  primaryText,
  drawerRowSelection,
  drawerNoPagination,
  noQueryKeys,
  rowKey,
  ...props
}) => {
  const [addVisible, showAddModal, hiddenAddModal] = useVisible(false);
  const [scanvisible, setscanvisible] = useState<boolean>(false);

  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);

  const triggerChange = (changedValue: any) => {
    const { onChange } = props || {};

    const values = changedValue || [];

    onChange?.(values);
  };

  const handleConfirm = (selectedRows: any) => {
    triggerChange(selectedRows);
    hiddenAddModal();
  };

  const handleConfirmScan = (selectedRows: any) => {
    triggerChange(selectedRows);
    setscanvisible(false);
  };

  const handleScanCancel = () => {
    setscanvisible(false);
  }

  const field = useField();

  const value = toJS(field.value) || [];

  const handleClick = () => {
    showAddModal();
  };

  const handleScanClick = () => {
    setscanvisible(true);
  };

  const handleDel = () => {
    triggerChange(
      value?.filter((item: any) => {
        return !selectedRowKeys.includes(item[rowKey || "id"]);
      }) || [],
    );
    setSelectedRowKeys([]);
  };

  let rowSelection = null;
  if (selection && editable) {
    rowSelection = {
      selectedRowKeys,
      onChange: (rowKeys: Key[], selectedRows: any[]) => {

        setSelectedRowKeys(rowKeys);
      },
    };
  }

  const renderTitle = () => {
    return (
      <Space>
        <Button type="primary" onClick={handleClick}>
          {primaryText || '选择'}
        </Button>
        {props?.headerRender?.()}
        <Button onClick={handleDel} disabled={!selectedRowKeys.length}>
          删除
        </Button>
      </Space>
    );
  };
  return (
    <>
      <ArrayTable
        {...props}
        rowKey={rowKey}
        nNeedAddition
        rowSelection={rowSelection}
        title={selection && editable ? renderTitle : undefined}
      />

      <CheckboxTableDrawer
        visible={addVisible}
        cancel={hiddenAddModal}
        confirm={handleConfirm}
        defaultValue={value}
        pageCode={drawerPageCode}
        noQueryKeys={noQueryKeys}
        pageApi={pageApi}
        rowKey={rowKey}
        extraPrams={extraPrams}
        drawerRowSelection={drawerRowSelection}
        noPagination={drawerNoPagination}
      />

      {scanvisible ?<ScanTableDrawer
        cancel={handleScanCancel}
        confirm={handleConfirmScan}
        defaultValue={value}
        pageCode="ArchivesManage_Scan_L"
        noQueryKeys={noQueryKeys}
        pageApi={pageApi}
        rowKey={rowKey}
        extraPrams={extraPrams}
        drawerRowSelection={drawerRowSelection}
        noPagination={drawerNoPagination}
      /> : null}
    </>
  );
};

export default ArrayTableDrawer;
